<template>
	<view>
		<view class="header">
			<view class="header-icon">
				<image src="../../static/icon/back.png" style="width: 40rpx;height: 40rpx;" @click="back"></image>
			</view>
			<view class="header-title">文章列表</view>
		</view>
		<view style="background-color: rgb(245, 245, 245);padding: 20rpx;">
			<!-- <view class="cellBox" v-for="(item, index) in dataList" :key="item.id" @click="goEnterprise(item.id)">
				<view class="rotatBox">
					<view class="imgBox">
						<image :src="item.logoUrl" style="width: 100%; height: 100%"></image>
					</view>
					<view class="cardCss">
						<view class="cardTitle">{{ item.name }}</view>
						<view class="contentCss" v-html=" item.introduction" />
					</view>
				</view>
			</view> -->
			<view class="newsTitle" v-for="(item, index) in realInfoList" :key="item.id" @click="goDetail(item.id) ">
				<view class="">
					<view class="articleDetails">
						<view class="">
							<span class="articleNo">NO.{{item.id}}</span>
							<span class="articleText"> {{item.title}}</span>
						</view>
					</view>
					<view class="degreeHeatCss">
						{{item.heat}} 热度
					</view>
				</view>
				<view class="imgBox">
					<image :src="item.imgUrl" style="width: 100%; height: 100%"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'single',
				dataList: [],
				unitType: 2,
				userId: 1,
				realInfoList:[]
			}
		},
		
		onLoad(options) {
			this.getInformationPageList()
		},
		methods: {
			// 返回
			back() {
				const pages = getCurrentPages()
				if (pages && pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					history.go(-1)
				}
			},
			
			getInformationPageList() {
				uni.showLoading({
					title: "正在加载",
				});
				const that = this
				console.log(that.userId,666);
				that.$api.request('article', 'informationPage', {
					userId: that.userId
				}).then(res => {
					uni.hideLoading();
					that.realInfoList = res.data.items
					console.log(that.realInfoList, 999);
				})
			}
		}
	}
</script>

<style lang="scss">
	.header{
		display: flex;
		height: 160rpx;
		line-height: 160rpx;
		.header-icon{
			padding-left: 40rpx;
			padding-top: 10rpx;
			flex: 3;
		}
		.header-title{
			flex: 5;
		}
	}
	.newsTitle {
		margin-top: 10rpx;
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	
		.articleNo {
			font-size: 26rpx;
			background-color: #fef0f0;
			color: #f56c6c;
			padding: 5rpx 10rpx;
		}
	
		.articleText {
			margin: 0 10rpx;
			line-height: 25px;
			font-size: 30rpx;
			font-weight: 500;
		}
	
		.imgBox {
			flex-shrink: 0;
			margin-right: 11px;
			width: 125px;
			height: 75px;
			border-radius: 6px;
			overflow: hidden;
			border: 1px #f5f5f5 solid;
		}
	}
	.degreeHeatCss {
		/* font-size: 20rpx;
		margin-top: 30rpx;
		color: rgb(153, 153, 153); */
		margin-top: 60rpx;
		color: #999;
		font-size: 13px;
		overflow: hidden;
	
	}
</style>
